<template>
  <div class="bg">
    <div class="welcome">欢迎使用</div>
    <div class="desc">卡密绑定注册登录即可兑换更多优惠福利</div>
    <div class="loginForm">
      <div class="loginForm-item">
        <header>登录</header>
        <div @click="goRegister">
          <img src="../assets/login/code.svg" alt="">
          <span>扫一扫</span>
        </div>
      </div>
      <van-form @submit="onSubmit">
        <van-field class="cell-wrap" show-error="false" v-model="phonenumber" name="phonenumber" placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]">
          <template #left-icon>
            <img src="../assets/login/phone.svg" style="width: 13px; height: 18px; margin-right: 3px;" />
          </template>
          <template #button>
            <div class="code" @click="getCode" :class="{ disabled: countdown > 0 }">
              {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </div>
          </template>
        </van-field>
        <van-field class="cell-wrap cell-wrap2" left-icon="smile-o" show-error="false" v-model="code" name="code"
          placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
          <template #left-icon>
            <img src="../assets/login/codeC.svg" style="width: 13px; height: 14px; margin-right: 3px;" />
          </template>
        </van-field>
        <van-field class="cell-wrap-copy" name="checkbox">
          <template #input>
            <van-checkbox v-model="agree" icon-size="12px" />
            <div class="agree">
              <span>我已阅读并同意</span>
              <span @click="goconfiguration(1)">《用户协议》</span>
              <span @click="goconfiguration(2)">《隐私政策》</span>
            </div>
          </template>
        </van-field>
        <div style="margin: 41px 0 0 0;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
      <div class="gore" @click="goRegister"><span>没有账号，去注册</span></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bg {
  width: 375px;
  height: 458px;
  background: linear-gradient(131deg, rgba(252, 151, 144, 0.3) 0%, rgba(255, 221, 254, 0.2) 52%, rgba(255, 206, 218, 0.84) 83%, #FFFFFF 100%);
  border-radius: 0px;

  .loginForm {
    width: calc(100% - 22px);
    height: 485px;
    margin: auto;
    background-image: url("../assets/login/bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 485px;

    .loginForm-item {
      width: 100%;
      height: 40px;
      display: flex;

      header {
        width: calc(100% - 120px);
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-family: DingTalk JinBuTi;
        font-weight: 400;
        font-size: 20px;
        color: #EE473B;
        // padding-top: 10px;
        box-sizing: border-box;
      }

      >div {
        width: 120px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;

        >img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }

        >span {
          font-family: DingTalk JinBuTi;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
        }
      }
    }

    .van-form {
      width: calc(100% - 36px);
      margin: 30px auto 0;
    }

    .cell-wrap {
      width: 100%;
      background: #F8F8F8;
      border-radius: 23px;
      margin-bottom: 12px;
      padding: 13px 23px;
      box-sizing: border-box;
      overflow: inherit;
    }

    .cell-wrap2 {
      margin-bottom: 2px;
    }

    ::v-deep .van-field__error-message {
      margin-top: 3px;
    }

    .code {
      padding: 0 0 0 10px;
      border-left: 1px solid #D3D3D3;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #EE473B;

    }

    .van-cell::after {
      display: none;
    }

    ::v-deep .van-field__left-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-right: 10px;
    }

    .cell-wrap-copy {
      height: auto;
      padding: 0 23px;
      margin-top: 10px;
      overflow: visible; // 确保内容不被裁剪

      ::v-deep .van-checkbox {
        flex-shrink: 0; // 防止被压缩
        margin-right: 8px; // Add space between checkbox and text
      }

      .agree {
        width: 100%;

        span {
          font-size: 12px;
        }

        span:nth-child(1) {
          color: #9B9B9B;
        }

        span:nth-child(2) {
          color: #EE473B;
        }

        span:nth-child(3) {
          color: #EE473B;
        }
      }
    }

    .van-button {
      background: linear-gradient(103deg, #F49E97 0%, #EE473B 100%);
      box-shadow: 0px 3px 6px rgba(238, 71, 59, 0.2);
      border-radius: 23px;
      border: none;
      height: 46px;
      width: 100%;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
    }

    .gore {
      width: 100%;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #EE473B;
      margin-top: 17px;
    }
  }

  .desc {
    height: 20px;
    font-family: PingFang SC;
    font-size: 14px;
    padding-top: 5px;
    color: #A2A2A2;
    padding-left: 33px;
    padding-bottom: 30px;
    margin-top: 5px;
  }

  .welcome {
    padding-top: 86px;
    padding-left: 33px;
    // width: 161px;
    height: 36px;
    font-family: DingTalk JinBuTi;
    font-size: 30px;
    color: #EE473B;
  }
}
</style>
<script>
import Cookies from "js-cookie";
import loginAPI from "@/api/login";
import { Toast } from 'vant';
export default {
  data() {
    return {
      countdown: 0, // 倒计时秒数
      timer: null,// 定时器
      phonenumber: '',
      code: '',
      agree: false,
      cardNo: '',
      cardPwd: ''
    }
  },
  beforeUnmount() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  created() {
  },
  methods: {
      goconfiguration(type) {
      if (type == 1) {
        this.$router.push({
          path: '/aboutMine'
        })
      } else {
        this.$router.push({
          path: '/policy'
        })
      }
    },
    getCode() {
      // 如果正在倒计时或手机号为空，则不执行
      if (this.countdown > 0 || !this.phonenumber) {
        return;
      }
      loginAPI.getSendVerificationCodeAPI({
        phoneNumber: this.phonenumber
      }).then(res => {

      })
      // 开始倒计时
      this.countdown = 60;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    goRegister() {
      // this.$router.push({
      //   path: '/register'
      // })

      // 1. 配置基础参数
      const appId = 'wxf6b22350d8075054'; // 从微信公众平台获取
      const redirectUri = encodeURIComponent('https://xhjzh.life/register'
      );
      // 2. 构造微信授权URL
      const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?` +
        `appid=${appId}` +
        `&redirect_uri=${redirectUri}` +
        `&response_type=code` + // 固定值，返回 code
        `&scope=snsapi_userinfo` + // 授权类型（snsapi_base 或 snsapi_userinfo）
        `&state=home` + // 自定义参数（可选，可用于存储跳转前的页面路径）
        `#wechat_redirect`; // 固定锚点

      // 3. 跳转到微信授权页面（在新窗口打开，避免当前页历史记录问题）
      window.open(authUrl, '_self'); // 或使用 window.location.href = authUrl

    },
    onSubmit(values) {
      if (!this.agree) {
        this.$toast('请先同意隐私协议');
        return;
      }
      loginAPI.getLoginAPI(values).then(res => {
        if (res.code == 200) {
          Toast.success('登录成功');
          localStorage.setItem("token", res.token)
          Cookies.set("token", res.token)
          localStorage.setItem("phonenumber", this.phonenumber)
          setTimeout(() => {
            this.$router.push({
              path: '/home'
            })
          }, 2000)
        }
      })
    },
  }
}
</script>